<template>
    <view >
        <form @submit="formSubmit" >
            <view class="container">
                
                <tui-list-cell :hover="false">
                        <view class="tui-line-cell">
                            <view class="tui-title">旧密码</view>
                            <input placeholder-class="phcolor" class="tui-input" name="oldpassword" placeholder="请输入旧密码" maxlength="50" type="text" />
                        </view>
                    </tui-list-cell>
                    <tui-list-cell :hover="false">
                        <view class="tui-line-cell">
                            <view class="tui-title">新密码</view>
                            <input placeholder-class="phcolor" class="tui-input"  name="password" placeholder="请输入新密码" maxlength="50" type="text" />
                        </view>
                    </tui-list-cell>
                    <tui-list-cell :hover="false">
                        <view class="tui-line-cell">
                            <view class="tui-title">重复密码</view>
                            <input placeholder-class="phcolor" class="tui-input"  name="confirmpassword" placeholder="请输入重复密码" maxlength="50" type="text" />
                        </view>
                    </tui-list-cell>
            </view>
            
            <view class="btn pad10">
                <button type="primary" formType="submit" >保存</button>
            </view>
        </form>
    </view>
</template>

<script>
const form = require("@/common/framework/libs/formValidation.js")
import {updatePassword} from '@/pages/user/interface.js'
export default {
    onLoad(opt){
        console.log(opt)
        setTimeout(()=>{
            this.username = opt.username;
        },300)
        
    },
    data(){
        return {
            username:'',
        }
    },
    methods: {
        formSubmit(e){
            let rules = [ {
					name: "oldpassword",
					rule: ["required"],
					msg: ["请输入旧密码"]
                },{
					name: "password",
					rule: ["required"],
					msg: ["请输入新密码"]
				},{
					name: "confirmpassword",
					rule: ["required", "isSame:password"],
					msg: ["请输入重复密码", "两次输入的密码不一致"]
				} ]
                //进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
                    console.log(formData);
                    this.savePwd(formData);
				
				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
        },
        async savePwd(params){
            params['username'] = this.username;
            let Res = await updatePassword(params);
            if(Res && Res.success){
					uni.showToast({
						icon:'none',
						title:'保存成功~！',
                    })
                    setTimeout(()=>{
                        uni.navigateBack();
                    },1000)
				}else{
					uni.showToast({
						icon:'none',
						title:Res.message ||'保存失败~！',
					})
				}
        }
    },
}
</script>

<style lang="scss">
.container {
		padding: 20rpx 0 50rpx 0;
	}
    .tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
        min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
    }
    .pad10 {
		padding: 10px;
	}
</style>